<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--<link rel="stylesheet" href="css/login.css" />-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <title>Document</title>
    <style>
        .loginContainer{
            margin: 0 auto;
            width: 600px;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 50px;
            border: 1px solid;
        }
        .loginContainer input{
            margin-bottom: 20px;
        }
        .loginStyle{
            width: 160px;
            height: 40px;
            background: rgb(50,203,77);
            color: white;
            font-size: 17px;
        }
        .inputStyle{
            width: 200px;
            height: 30px;
            padding: 5px;
            outline: none;
        }

        .inputStyle:focus{
            border: 1px solid rgb(50,203,77);
        }
        form{
            position: relative;
        }
        .exchange{
            position: absolute;
            top:8px;
            right: 65px;
            color: red;
        }
        .img{
            width: 100px;
            height: 100px;

        }
        .code-img {
            width: 100px;
            height: 40px;
            position: relative;
        }
        svg{
            width: 100px;
            height: 100px;
            background: #cfcfcf;
            /*transform: rotate(-90.00deg);*/
            /*fill: transparent;*/
            /*stroke: rgba(116, 116, 116, 1);*/

            position: absolute;
            left: 0;
            right: -65px;
            bottom: 141px;
            /*margin: auto;*/
            stroke: rgba(116, 116, 116, 1);
        }
    </style>
</head>

<body>
<div class="loginContainer">
    <h1>注册</h1>
    <form action="/register" enctype="application/x-www-form-urlencoded" method="post" onsubmit="return false;" >姓名：
        <input class="inputStyle" id="username" type="text" name="username" /><br />密码：
        <input class="inputStyle" id="pwd" type="password" name="pwd" /><br />
        <input class="inputStyle" id="code" type="text" name="code" />
        <input class="" id="get_code" type="button" name="code" value="看不清再来一下子"/><br />
        <input class="loginStyle" id="regist-btn" type="submit" value="注册" />
    </form>
    <input type="file" name="file">
    <button class="upload-img">上传头像</button>
    <img src="" class="img" alt="">
    <object class="code-img">
        <!--<img src="/api/blog/code" alt="">-->
    </object>
    <!--<img src="/captcha" onclick={(event.target).attr('src','/captcha?'+Math.random())}>-->
</div>
</body>
<script>
    function $( el ) {
        return document.querySelector( el )
    }
    $('#get_code').addEventListener('click', () => {

        getCode()

    })
    // 注册按钮
    $("#regist-btn").onclick = function(){
        const codeValue = $('#code').value; // 验证码
        let username = $('#username').value; // 用户名
        let pwd = $('#pwd').value; // 密码

        const checkObj = {
            username: '用户名不能为空',
            pwd: '密码不能为空',
            code: '验证码不能为空',
        }
        for (let val in checkObj) {
            if (!$('#'+val).value) {
                alert(checkObj[val])
                return
            }
        }
        const xhr = new XMLHttpRequest;
        xhr.open('post', '/open/api/blog/register', true);
        // xhr.setRequestHeader('Authorization','Bearer '+"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiIxIiwiaWF0IjoxNjIxMTc3ODE3LCJleHAiOjE2MjE0MzcwMTd9.6STpz-wDNjOxhpSe1l7PT1B7VNquNSx94nPPCxfCQ2k")
        xhr.setRequestHeader('Content-Type','application/json')
        xhr.onload = function () {
            const { status, data, msg } = JSON.stringify(xhr.responseText)
            console.log(JSON.stringify(xhr.responseText));

        }
        const data = {
            username,
            pwd,
            codeValue
        }
        xhr.send( JSON.stringify( data ) )
    }
    getCode()
    function getCode() {
        const xhr = new XMLHttpRequest;
        xhr.open('get','/open/api/blog/code',true);
        xhr.onload =function () {
            const code = JSON.parse(xhr.responseText)
            $('.code-img').innerHTML = code.img;
        }
        xhr.send()
    }
    // $('#regist-btn').addEventListener('click', () =>{
    //
    //     const token = localStorage.getItem('token')
    //     if ( token ) {
    //         const xhr = new XMLHttpRequest();
    //         xhr.open('get','/api/blog/user', true);
    //         xhr.setRequestHeader('authorization','Bearer '+ token)
    //         xhr.onload = function () {
    //             console.log(xhr.resoponseText)
    //         }
    //         xhr.send();
    //     }
    // })
    // 上传头像
    $('.upload-img').addEventListener('click', ()=> {
        const file = $('input[name=file]').files[0]

        // const format = fileName.split('.')[1]
        // console.log(format, fileName)
        //判断图片类型
        var fileName = $('input[name=file]').value;
        if(fileName==" "){
            alert("请上传图片");
            return false;
        }else{
            if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)){
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
                return false;
            }
        }


        const formData = new FormData();
        console.log(formData)
        formData.append('photo',file);
        const xhr = new XMLHttpRequest;
        xhr.open('post', '/api/blog/uploadPicture', true)
        xhr.setRequestHeader('authorization','Bearer ' + localStorage.getItem('token'));
        // xhr.setRequestHeader('content-type','application/multipart/form-data')
        xhr.onload = function () {
            console.log(xhr.responseText)
            const { msg, status, data} = JSON.parse(xhr.responseText);
            $('.img').setAttribute('src',data)
        }
        xhr.send(formData)
    })

</script>
</html>